/**
 * 派车单管理列表页面
 * @author xiaoxujs
 */

// components
import SearchModule from "./components/SearchModule"; //检索模块

import { Button, ConfigProvider, message, Space, Table, TableProps } from "antd";
import { PaichedanManagementListBox, PMListBox, PMTitleBox } from "./style";
import { useCallback, useEffect, useState } from "react";
import type { IPcdZyVehicleInfoSelect, IPcdZyVehicleInfoSelectParams, IPcdZyVehicleInfoSelectParamsForm } from "../../../type/paichedan";
import { getPcdZyVehicleInfoDelete, postPcdZyVehicleInfoSelect } from "../api";
import { IFenye } from "../../../type/commit";
import { TablePaginationPosition } from "../../../type/antd";
import AddAndChangeModule from './components/AddAndChangeModule'
import DictionaryItemStyleModule from "../../../components/DictionaryItemStyleModule";
import { handleGetDictionaryItemColor, handleGetDictionaryItemValue } from "../../../assets/fun/DictionaryItem";
import { inputType, pypeOfVehicleDispatch, vehicleType } from "../../../assets/data";
import { handleDeleteAssets } from "../../../assets/fun/Antd/deleteFun";

const PaichedanManagementList = () => {
    const contentValue: TablePaginationPosition = "bottomCenter"; //位置

    const [paging, setPaging] = useState({ //分页
        currentPage: 1,
        pageSize: 10
    });
    const [listData, setListData] = useState<IPcdZyVehicleInfoSelect[]>();
    const [total, setTotal] = useState(0);
    const [addAndChangeModuleShow, setAddAndChangeModuleShow] = useState(false); // 添加 编辑 弹窗
    const [clickData, setClickData] = useState<IPcdZyVehicleInfoSelect>(); //  点击编辑data
    const [searchData, setSearchData] = useState<IPcdZyVehicleInfoSelectParamsForm>(); // 筛选条件
    const [tableLoading, setTableLoading] = useState(false); //tableLoading





    const listFun = useCallback(async (params: IPcdZyVehicleInfoSelectParams) => {
        setTableLoading(true);
        const { code, msg, data } = (await postPcdZyVehicleInfoSelect(
            params
        )) as IFenye<IPcdZyVehicleInfoSelect>;
        if (code === 20000) {
            setListData(data.records);
            setTotal(data.total);
            setPaging({
                currentPage: params.currentPage,
                pageSize: params.pageSize
            })
            setTableLoading(false);
        } else {
            message.error(msg);
        }
    }, []);

    useEffect(() => {
        const params = {
            currentPage: 1,
            pageSize: 10
        }
        listFun(params);
    }, [listFun])

    // 检索回调函数
    const handleSearchCallback = (data: IPcdZyVehicleInfoSelectParamsForm) => {
        const params = {
            ...data,
            currentPage: 1,
            pageSize: 10
        };
        listFun(params);
        setSearchData(data);
    }
    // 添加 、 编辑 回调函数
    const handleAddAndChangeModuleCallback = () => {
        setClickData(undefined);
        setAddAndChangeModuleShow(false);
        const params = {
            searchData,
            currentPage: paging.currentPage,
            pageSize: paging.pageSize
        };
        listFun(params);

    }
    // 删除数据
    const handleDelete = (id: string) => {
        handleDeleteAssets(
            async () => {
                return (await getPcdZyVehicleInfoDelete({ id })) as {
                    code: number;
                    msg: string;
                };
            },
            () => {
                const params = {
                    searchData,
                    currentPage: paging.currentPage,
                    pageSize: paging.pageSize
                };
                listFun(params);
            }
        );
    }


    const pagination = {
        //分页
        position: [contentValue],
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        // showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: paging.pageSize,
        //当前页数
        current: paging.currentPage,
        //数据总数
        total: total,
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current: number, pageSize: number) => {
            const params = {
                ...searchData,
                currentPage: current,
                pageSize: pageSize,
            }
            listFun(params);
            // setPaging({
            //     currentPage: current,
            //     pageSize: pageSize,
            // });
        },
    };
    const columns: TableProps<IPcdZyVehicleInfoSelect>['columns'] = [
        {
            title: '序号',
            align: 'center',
            render: (text, record, index) => <span>{(paging.currentPage * paging.pageSize) - 10 + index + 1}</span>,
        },
        {
            title: '派车单编号',
            align: 'center',
            dataIndex: 'dispatchNum',
        },
        {
            title: '车牌号',
            align: 'center',
            render: (_, record) => <span>{record.plateColor + record.plateNumber}</span>
        },
        {
            title: '车斗长(mm)',
            align: 'center',
            dataIndex: 'carDollyLength',
        },
        {
            title: '车斗宽(mm)',
            align: 'center',
            dataIndex: 'carDollyWidth',
        },
        {
            title: '车斗高(mm)',
            align: 'center',
            dataIndex: 'carDollyHeight',
        },
        {
            title: '车型',
            align: 'center',
            dataIndex: 'carType',
            render: (text) => <span>{handleGetDictionaryItemValue(vehicleType, text)}</span>
        },
        {
            title: '预装量(吨)',
            align: 'center',
            dataIndex: 'preloadAmount',
        },
        {
            title: '司机姓名',
            align: 'center',
            dataIndex: 'driverName',
        },
        {
            title: '电话',
            align: 'center',
            dataIndex: 'contactNumber',
        },
        {
            title: '派车类型',
            align: 'center',
            dataIndex: 'dispatchType',
            render: (text, record) => <DictionaryItemStyleModule
                dianColor={handleGetDictionaryItemColor(pypeOfVehicleDispatch, text)}
                text={handleGetDictionaryItemValue(pypeOfVehicleDispatch, text)}
            />
        },
        {
            title: '录入方式',
            align: 'center',
            dataIndex: 'inputType',
            render: (text) => <span>{handleGetDictionaryItemValue(inputType, text)}</span>
        },
        {
            title: '操作',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="link" onClick={() => {
                        setClickData(record);
                        setAddAndChangeModuleShow(true);
                    }}>编辑</Button>
                    <Button type="link" onClick={() => handleDelete(record.id)}>删除</Button>
                </Space>
            ),
        },
    ];
    return <PaichedanManagementListBox>
        <PMTitleBox>
            <div className="title">派车单管理</div>
            <Button type='primary' icon={<span className="iconfont">&#xe620;</span>} onClick={() => setAddAndChangeModuleShow(true)}>添加车辆</Button>
        </PMTitleBox>
        <SearchModule handleSearchCallback={handleSearchCallback} />
        <PMListBox>
            <div className="list-title">
                <div className="list-title-text">全部</div>
            </div>
            <ConfigProvider theme={{
                components: {
                    Table: {
                        headerColor: '#8B9BAC'
                    }
                }
            }}>
                <Table<IPcdZyVehicleInfoSelect>
                    columns={columns}
                    dataSource={listData}
                    rowKey='id'
                    pagination={pagination}
                    loading={tableLoading}
                />
            </ConfigProvider>

        </PMListBox>
        <AddAndChangeModule
            open={addAndChangeModuleShow}
            handleAddAndChangeModuleCallback={handleAddAndChangeModuleCallback}
            clickData={clickData}
        />
    </PaichedanManagementListBox>
}

export default PaichedanManagementList;